<script lang="tsx">
import type { PropType, CSSProperties } from 'vue';

import { computed, defineComponent, unref } from 'vue';
import { SimpleMenu, ScrollContainer } from '#/components';
import { Applogo } from '@/components/Application';

import { MenuModeEnum } from '@/enums/menuEnum';

import { useMenuSetting } from '@/hooks/setting/useMenuSetting';

import { useGo } from '@/hooks/web/usePage';
import { openWindow } from '@/utils';
import { propTypes } from '@/utils/propTypes';
import { isUrl } from '@/utils/is';
import { useRootSetting } from '@/hooks/setting/useRootSetting';
import { useSplitMenu } from './useLayoutMenu';
import { useDesign } from '@/hooks/web/useDesign';

export default defineComponent({
	name: 'LayoutMenu',
	props: {
		theme: propTypes.oneOf(['light', 'dark']),

		// menu Mode
		menuMode: {
			type: [String] as PropType<Nullable<MenuModeEnum>>,
			default: MenuModeEnum.INLINE,
		},
	},
	setup(props) {
		const go = useGo();

		const { getMenuTheme, getCollapsed, getCollapsedShowTitle, getAccordion, getIsSidebarType } = useMenuSetting();
		const { getShowLogo } = useRootSetting();

		const { prefixCls } = useDesign('layout-menu');

		const { menusRef } = useSplitMenu();

		const getComputedMenuTheme = computed(() => props.theme || unref(getMenuTheme));

		const getIsShowLogo = computed(() => unref(getShowLogo) && unref(getIsSidebarType));

		const getWrapperStyle = computed((): CSSProperties => {
			return {
				height: `calc(100% - ${unref(getIsShowLogo) ? '48px' : '0px'})`,
			};
		});

		const getLogoClass = computed(() => {
			return [`${prefixCls}-logo`, unref(getComputedMenuTheme)];
		});

		const getCommonProps = computed(() => {
			const menus = unref(menusRef);
			return {
				menus,
				beforeClickFn: beforeMenuClickFn,
				items: menus,
				theme: unref(getComputedMenuTheme),
				accordion: unref(getAccordion),
				collapse: unref(getCollapsed),
				collapsedShowTitle: unref(getCollapsedShowTitle),
				onMenuClick: handleMenuClick,
			};
		});
		/**
		 * click menu
		 * @param menu
		 */

		function handleMenuClick(path: string) {
			go(path);
		}

		/**
		 * before click menu
		 * @param menu
		 */
		async function beforeMenuClickFn(path: string) {
			if (!isUrl(path)) {
				return true;
			}
			openWindow(path);
			return false;
		}

		function renderHeader() {
			if (!unref(getIsShowLogo)) return null;
			return (
				<Applogo
					showTitle={!unref(getCollapsed)}
					class={unref(getLogoClass)}
					theme={unref(getComputedMenuTheme)}
				/>
			);
		}

		function renderMenu() {
			const { menus, ...menuProps } = unref(getCommonProps);
			if (!menus || !menus.length) return null;
			return <SimpleMenu {...menuProps} items={menus} />;
		}

		return () => {
			return (
				<>
					{renderHeader()}
					{<ScrollContainer style={unref(getWrapperStyle)}>{() => renderMenu()}</ScrollContainer>}
				</>
			);
		};
	},
});
</script>
<style lang="less">
@prefix-cls: ~'@{namespace}-layout-menu';
@logo-prefix-cls: ~'@{namespace}-app-logo';

.@{prefix-cls} {
	&-logo {
		height: @header-height;
		padding: 10px 4px 10px 10px;

		img {
			width: @logo-width;
			height: @logo-width;
		}
	}
}
</style>
